<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <!-- <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="100px" dialogWidth="500px" :isHandle="true" /> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        orderNo: "",
        nickName: "",
        agentName: "",
        merchantName: "",
        state: "255",
        aftersaleState: "",
        etime: "",
        orderType: "1",
        distributorName: ""
      },
      searchForm: [
        {
          type: "input",
          prop: "orderNo",
          placeholder: "Order Nnumber",
          width: 150
        },
        {
          type: "input",
          prop: "nickName",
          placeholder: "下单User",
          width: 150
        },
        {
          type: "select",
          prop: "agentName",
          placeholder: "Agent",
          width: 130,
          change: e => this.changeAgent(e),
          options: []
        },
        {
          type: "select",
          prop: "merchantName",
          placeholder: "商家",
          width: 120,
          options: []
        },

        {
          type: "select",
          prop: "distributorName",
          placeholder: "配送员",
          width: 140,
          options: []
        },
        {
          type: "select",
          prop: "aftersaleState",
          placeholder: "订单Status",
          width: 150,
          options: [
            {
              label: "Pending Review",
              value: "0"
            },
            {
              label: "已退款",
              value: "1"
            },
            {
              label: "拒绝退款",
              value: "2"
            }
          ]
        },
        {
          type: "date",
          prop: "etime",
          placeholder: "Submission Time",
          width: 170,
          options: []
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        },
        {
          label: "ExportExcel",
          icon: "el-icon-download",
          type: "success",
          loading: false,
          handle: that => this.handleDownload()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "Order Nnumber",
          prop: "orderNo"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "Submission Time",
          prop: "aftersaleCreatedTime"
        },
        {
          label: "Device Number",
          prop: "equipmentNo"
        },
        {
          label: "所属商家",
          prop: "merchantName"
        },
        {
          label: "下单User",
          prop: "nickName"
        },
        {
          label: "PaymentMoney",
          prop: "actuallyPaidMoney"
        },
        {
          label: "Payment方式",
          prop: "payType",
          formatter: e =>
            e.payType == 1
              ? "WeChatPayment"
              : e.payType == 2
              ? "AlipayPayment"
              : e.payType == 3
              ? "ic卡"
              : ""
        },
        {
          label: "订单Status",
          prop: "aftersaleState",
          type: "tag",
          theme: e => "primary",
          formatter: e =>
            e.state == 7
              ? "Pending Review"
              : e.state == 8
              ? "已退款"
              : e.state == 9
              ? "拒绝退款"
              : ""
        },
        {
          label: "Operations",
          type: "button",
          btnList: [
            {
              label: "Order Details",
              type: "primary",
              // isShow: e => e.orderNo == '123' ? true : false,
              handle: e => this.goDetail(e)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let param = { ...this.searchData, ...this.tablePage };
      let res = await this.api.shopOrderlist(param);
      if (res) {
        this.tableData = res.data.list;
        this.tablePage.total = res.data.total;
      }
      let operatorId = "";
      let resOpt = await this.api.getOperatorList({});
      if (resOpt) {
        operatorId = resOpt.data.operatorId;
      }
      let resAgent = await this.api.getAgentList({
        userId: operatorId
      });
      let resMerchant = await this.api.getMerchantList({
        userId: operatorId
      });
      let resDistributor = await this.api.getDistributorList({});
      if (resAgent) {
        this.searchForm[2].options = [];
        for (let i = 0; i < resAgent.data.length; i++) {
          this.searchForm[2].options.push({
            label: resAgent.data[i].name,
            value: resAgent.data[i].agentId
          });
        }
      }
      if (resMerchant) {
        this.searchForm[3].options = [];
        for (let i = 0; i < resMerchant.data.length; i++) {
          this.searchForm[3].options.push({
            label: resMerchant.data[i].name,
            value: resMerchant.data[i].merchantId
          });
        }
      }
      if (resDistributor) {
        for (let i = 0; i < resMerchant.data.length; i++) {
          this.searchForm[4].options.push({
            label: resDistributor.data[i].name,
            value: resDistributor.data[i].distributorId
          });
        }
      }
    },
    async changeAgent(e) {
      //     console.log(e);
      //     let resMerchant = await this.api.getMerchantList({
      //         userId: e
      //     })
      //     if (resMerchant) {
      //         this.searchForm[3].options=[]
      //         for (let i = 0; i < resAgent.data.length; i++) {
      //             this.searchForm[3].options.push({
      //                 label: resMerchant.data[i].name,
      //                 value: resMerchant.data[i].agentId
      //             })
      //         }
      //     }
    },
    //查询
    elFormSubmit() {},
    goDetail(e) {
      // console.log(e);
      this.$router.push({
        path: "/saleServe-ondoor_Detail",
        query: { id: e.id }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          // if (j === 'connectedStatus') {
          //     return v[j] == 1 ? "Online" : "Offline"
          // } else if (j === 'status') {
          //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "Nonactivated"
          // } else {
          return v[j];
          // }
        })
      );
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
</style>
